<template>
	<div class="margin-top">
		<Header  @changeLanguage="changeLanguage" />
		<div class="wrap">
		<Title :pageName="title" />
		<List :list="list" v-loading="loading" :emptyText="emptyText" />
		<el-pagination background layout="prev, pager, next,jumper" :total="total" :page-size="pagesize" @current-change="currentChange" @prev-click="prevClick" @next-click="nextClick">
		</el-pagination>
		</div>
		<Footer />
	</div>
</template>

<script>
	import {
		getNewsList
	} from "@/api";
	import {
		news,empty
	} from "@/lang";
	import Header from "@/components/Header";
	import Title from "@/components/Title";
	import List from "@/components/List";
	import Footer from "@/components/Footer";

	export default {
		name: "news",
		components: {
			Header,
			Title,
			Footer,
			List
		},
		data() {
			return {
				news: news,
				title: "",
				langCode: "",
				list: [],
				total:0,
				offset:1,
				pagesize:10,
				emptyText:'',
				loading:false,
				empty:empty,
				
			};
		},
		created() {
			const lang = localStorage.getItem("lang");
			this.langCode = lang === "ZH" ? 0 : 1;
			this.setPageLanguage(lang);
			this.getList();
		},
		methods: {
			async getList() {
				this.loading = true
				let self = this;
				const res = await getNewsList({
					lang: self.langCode,
					pagesize:self.pagesize,
					offset:self.offset
				});
				this.list = res.news;
				this.total =  res.totalNumber;
				this.loading = false;
			},
			setPageLanguage(_lang) {
				const lang = _lang.toLowerCase();
				this.title = this.news.title[lang];
				this.emptyText = this.empty[lang]
			},
			changeLanguage(lang) {
				this.setPageLanguage(lang);
				this.getList();
			},
			prevClick(n){
				this.offset = n;
				this.getList();
			},
			nextClick(n){
				this.offset = n;
				this.getList();
			},
			currentChange(n){
				this.offset = n;
				this.getList();
			}
		},
	};
</script>

<style scoped lang="less">
	.wrap{
		min-height:45vh
	}
	/deep/ .el-pagination{
		width:1200px;
		margin:0 auto;
		margin-top: 15px;
		text-align: right;
	}
	/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{
		background-color: #255389;
	}
</style>
